<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-24 15:44:59
 * 天凉好个秋
-->
<template>
  <div>
    <AttrTab v-model="curTab" />
    <!--基础设置-->
    <template v-if="curTab == 1">
      <div class="attr-con-item">元件设置</div>
      <div class="att-con-box">
        <div class="attr-nav-item" v-for="(item, index) in attr.list" :key="item.id">
          <div class="ht">
            <div class="t" :class="{ 'on': item.open }" @click="$util.openAttr(attr.list, index)">
              轮播图{{ index + 1 }}
              <span class="el-icon-arrow-down"></span>
            </div>
            <AttrListOptions :list="attr.list" :index="index" />
          </div>
          <transition name="down">
            <div class="hm" v-if="item.open">
              <SetImgAttr :moduleData="item.img" title="上传图片" size="600 * 340" />
              <SetLinkAttr :link="item.link" />
            </div>
          </transition>
        </div>
        <div class="attr-nav-add" v-if="attr.list.length < attr.max" @click="addLbtList">
          <span class="el-icon-circle-plus-outline"></span>
          最多添加{{ attr.max }}个
        </div>
      </div>
    </template>
    <!--样式设置-->
    <template v-if="curTab == 2">
      <div class="att-con-box">
        <div class="att-con-pd">
          <SetModuleBaseAttr :moduleBase="attr.attrs" />
          <SetColorAttr title="指示器颜色" :attr="attr.attrs" ckey="dotColor" defColor="#718093" />
          <SetSwitchAttr title="轮播样式" :attr="attr.attrs" ckey="abbr" offName="默认样式" onName="立体样式" />
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import moduleData from '../../util/module'
export default {
    name: "slideshowAttr",
    props: ["attr"],
    data() {
        return {
            curTab: 1
        };
    },
    created() {
    },
    methods: {
        //添加导航
        addLbtList() {
            this.$util.addItem(this.attr.list, moduleData.slideShowItem());
        }
    }
};
</script>

<style></style>
